<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:composition template="../../templates/creatively-cabinet.xhtml">

        <ui:param name="pageTitle" value="Home / File Upload"/>
        <ui:param name="webSiteTitle" value="X Files"/>

        <ui:define name="submenu">
        </ui:define>

        <ui:define name="content">
            <p><strong>File upload form</strong></p>
            <div id="fileuploadfprm_container" class="grid_7">
                <form id="fileupload" method="post" enctype="multipart/form-data" action="#{request.contextPath}/operations/fileupload">
                    <h:panelGroup id="upload_errors" rendered="#{param['error'] != null}">
                        <ul class="message">
                            <li class="message_bad">Error: Failed to upload file. Try again.</li>
                        </ul>
                    </h:panelGroup>
                    <table style="vertical-align: central;">
                        <tr>
                            <td style="width: 180px;">File:</td>
                            <td><input class="input-xlarge" type="file" name="file" multiple="false"/></td>
                        </tr>
                        <tr>
                            <td>Encryption Type:</td>
                            <td>
                                <select style="width: 150px;" name="encryption_type" id="encription_type" onchange="hidePasswordField();">
                                    <option value="plain">No encryption</option>
                                    <option value="AES">AES</option>
                                </select>
                                <input id="secret_key" style="display: none; width: 120px;" type="password" placeholder="Password" name="secret_key"/>
                            </td>
                        </tr>
                        <tr>
                            <td>Access Type:</td>
                            <td><select class="input-xlarge" id="access_type" name="access_type" onchange="accessTypeChange();">
                                    <option value="public">Public Access</option>
                                    <option value="private" selected="true">Private Access</option>
                                    <option value="group">Group Access</option>
                                </select>
                            </td>
                        </tr>
                        <tr id="user_list_row" style="display: none;">
                            <td>
                                Users that are included into group (min. 3):
                            </td>
                            <td>
                                <a href="javascript:void(0);" onclick="showUserSelectionPanel();">Select</a>
                                <ul id="user_list">

                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td style="text-align: right;">
                                <div class="input-xlarge">
                                    <input class="button_green" type="submit" value="Upload"/>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" name="parent_file_id" value="#{param['parent']}"/>
                    <input type="hidden" name="redirect" value="#{request.contextPath}/faces/cabinet/home.xhtml#uploaded;tab;files"/>
                    <input type="hidden" name="error_redirect" value="#{request.contextPath}/faces/cabinet/operations/upload.xhtml?error=1"/>
                </form>


            </div>
            <div id="user_selection_panel" class="grid_4" style="display: none;">
                <h:form prependId="false">
                    Enter the e-mails of users and click add.
                    <h:inputTextarea class="input-large" style="width: 260px; height: 120px;" value="#{userSelectionBean.inputEmails}"/>
                    <div style="width: 260px; text-align: right;">
                        <h:commandLink class="button_green" value="Add" actionListener="#{userSelectionBean.parseUsersAction}">
                            <f:ajax render="parsed_users" execute="@form" onevent="updateUsers"/>
                        </h:commandLink>
                    </div>
                    <h:panelGroup id="parsed_users">
                        <ui:repeat value="#{userSelectionBean.parsedUsers}" var="parsedUser">
                            <li id="user_id#{parsedUser.userId}">
                                #{parsedUser.name} #{parsedUser.surname} [#{parsedUser.userId}][<a style="color: red; font-weight: bold;" href="javascript:void(0);" onclick="delUser('user_id#{parsedUser.userId}');">×</a>]
                                <input type="hidden" name="group_users[]" value="#{parsedUser.userId}"/>
                            </li>
                        </ui:repeat>
                    </h:panelGroup>
                </h:form>
            </div>
            <script type="text/javascript">
                function hidePasswordField(e) {
                    if($('#encription_type').val() != 'plain')
                        $('#secret_key').css('display', 'inline-block');
                    else {
                        $('#secret_key').css('display', 'none');
                        $('#secret_key').val('');
                    }
                }
                
                function accessTypeChange() {
                    var accessType = $('#access_type').val();
                    if(accessType === 'group') {
                        $('#user_list_row').css('display', 'table-row');
                    } else {
                        $('#user_list_row').css('display', 'none');
                    }
                }
                
                function showUserSelectionPanel() {
                    $('#user_selection_panel').toggle();
                }
                
                function updateUsers(e) {
                    if(e.status === 'success') {
                        $('#user_list').append($('#parsed_users').html());
                        $('#parsed_users').html('');
                        var seen = {};
                        $('#user_list li').each(function() {
                            var txt = $(this).text();
                            if (seen[txt])
                                $(this).remove();
                            else
                                seen[txt] = true;
                        });
                    }
                }
                
                function delUser(t) {
                    $('#'+t).remove();
                }
            </script>
        </ui:define>

    </ui:composition>

</html>